<template>
  <div :class="customerClass">
    <Tree :show-checkbox="showCheckBox" ref="tree" @on-check-change='onCheckChange' :data="areaListFilter"></Tree>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { getOriginData } from '@/util'
  export default {
    data() {
      return {
        currValue: [],
        list: []
      }
    },
    props: {
      customerClass: {
        type: String,
        default: '',
      },
      showCheckBox: {
        type: Boolean,
        default: true
      },
      checkedIdList: {
        type: Array,
        default: ()=>[]
      }
    },
    mounted() {
      if (!this.tree || !this.tree.length) {
        this.$store.dispatch('ajaxAddressTree', this.checkedIdList)
      }
    },
    methods: {
      onCheckChange(value) {
        this.$emit('onCheckChange', value, this.$refs.tree.getCheckedAndIndeterminateNodes())
      },
      updateArea(arr) {
        this.currValue = arr
      }
    },
    computed: {
      areaListFilter() {
        let val = getOriginData(this.tree)
        
        const ck = (arr) => {
          arr.forEach(item => {
            if (this.checkedIdList.find(i => i == item.id)) {
              item.checked = true
            } else {
              item.checked = false
            }
            if(item.children && item.children.length) {
              ck(item.children)
            }
          })
        }
        if (this.checkedIdList.length) {
          ck(val)
        }
        return [{ title: '选择业务区域',expand: false, children: val }]
      },
      ...mapGetters(['tree'])
    },
  }
</script>

